<template>
  <div class="container">
    <view class="nav">
      <view class="title fz18 bold">为什么要认证？</view>
      <view class="tags flex alignCenter">
        <view class="tag">更真实</view>
        <view class="tag">更优质</view>
        <view class="tag">更靠谱</view>
      </view>
    </view>
    <view class="content">
      <view class="box flex alignCenter justifyBetween" @click="toAuth(`/packagePages/my/realNameAuth`)">
        <view class="flex alignCenter">
          <uv-image src="https://oss.seenlove.com/images/14693e8a27d16b262048d6b7f73dc236.png" width="68px" height="68px"></uv-image>
          <view class="info">
            <view class="fz14 bold">实名认证</view>
            <view class="desc fz10">将与公安系统验证证件真实性</view>
          </view>
        </view>
        <view class="toAuth" v-if="counter.slParams.authInfo.isIdentityVerified=='已认证'">已认证</view>
        <view class="toAuth" v-else>立即认证</view>
      </view>

      <view class="box flex alignCenter justifyBetween" @click="proxy.$utils.toLink(`/packagePages/my/workAuth`)">
        <view class="flex alignCenter">
          <uv-image src="https://oss.seenlove.com/images/adeb995b47ccbd05021a88182fb25340.png" width="68px" height="68px"></uv-image>
          <view class="info">
            <view class="fz14 bold">工作认证</view>
            <view class="desc fz10">将与公安系统验证证件真实性</view>
          </view>
        </view>
        <view class="toAuth">立即认证</view>
      </view>
    </view>

    <view class="intro fz12 textCenter">
      确保信息真实才可在平台交友，与官方数据联网对比，承 诺保障信息安全，已有超120万用户认证
    </view>

    <view class="customerService flex alignCenter justifyCenter">
      <uv-icon name="server-man" color="#9E06FF" size="18"></uv-icon>
      <text class="fz12">联系客服</text>
    </view>
  </div>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();

function toAuth(url: string) {
  if (counter.slParams.authInfo.isIdentityVerified == "已认证") return;
  return proxy.$utils.toLink(url);
}
</script>



<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #fafafa;
  .nav {
    background-color: #9e06ff;
    padding: 15px;
    .title {
      color: #fff;
    }
    .tags {
      margin-top: 5px;
      padding-bottom: 50px;
      .tag {
        font-size: 10px;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        margin-right: 5px;
        background-color: #b43fff;
      }
    }
  }
  .content {
    margin: -10vw auto 0;
    width: calc(100% - 30px);
    .box {
      padding: 18px 16px;
      background-color: white;
      border-radius: 8px;
      margin-bottom: 10px;
      border-radius: 8px;
      .info {
        margin-left: 5px;
        .desc {
          color: #999999;
        }
      }
      .toAuth {
        color: #9e06ff;
        font-size: 12px;
        border-radius: 12.5px;
        background-color: #f4d8ff;
        padding: 4px 12px;
      }
    }
  }
  .intro {
    color: #999999;
    width: 80%;
    margin: 62px auto 40px;
  }
  .customerService {
    color: #9e06ff;
    text {
      margin-left: 6px;
    }
  }
}
</style>





